/*
 * @Author: your name
 * @Date: 2021-10-05 20:35:40
 * @LastEditTime: 2021-10-05 20:35:40
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \bigdate\src\hooks\flowconfig.ts
 */
/*
 * @Author: your name
 * @Date: 2021-09-27 10:37:27
 * @LastEditTime: 2021-10-03 17:31:28
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \bigdatavue\src\views\others\flowechart\config.ts
 */

import { Shape } from '@antv/x6'
// 链接桩配置
let port = {
    groups: {
        top: {
            position: 'top',
            attrs: {
                circle: {
                    r: 3,
                    magnet: true,
                    stroke: '#666',
                    strokeWidth: 1,
                    fill: '#fff',
                },
                line: {
                    stroke: '#7c68fc', // 指定 path 元素的填充色
                },
            },
        },
        bottom: {
            position: 'bottom',
            attrs: {
                circle: {
                    r: 3,
                    magnet: true,
                    stroke: '#666',
                    strokeWidth: 1,
                    fill: '#fff',
                },
            },
        },
        left: {
            position: 'left',
            attrs: {
                circle: {
                    r: 3,
                    magnet: true,
                    stroke: '#666',
                    strokeWidth: 1,
                    fill: '#fff',
                },
            },
        },
        right: {
            position: 'right',
            attrs: {
                circle: {
                    r: 3,
                    magnet: true,
                    stroke: '#666',
                    strokeWidth: 1,
                    fill: '#fff',
                },
            },
        },
    },
    items: [
        {
            id: 'port3-1',
            group: 'top',
        },
          
        {
            id: 'port4-1',
            group: 'bottom',
        },
        {
            id: 'port2-1',
            group: 'left',
        },
        
        {
            id: 'port1-1',
            group: 'right',
        },
    ],
    router: {
        name: 'manhattan',
        args: { 
            startDirections: ['top'],
            endDirections: ['bottom'],
        },
    },
}  
export const graphConfig = (dom, w, h) => ({
    keyboard: true,
    autoResize: true, 
    snapline: true, // 对齐线
    history: {
        enabled: true, // 历史记录
        ignoreChange: true, // ignoreChange 是否忽略属性变化
    },
    panning: true, // 支持平移拖拽
    container: dom,
    width: w,
    height: h,
    background: {
        color: '#fffbe6', // 设置画布背景颜色
    },
    grid: {
        size: 10, // 网格大小 10px
        visible: true, // 渲染网格背景
    },
    // 节点连接
    connecting: {
        router: 'manhattan',
        connector: {
            name: 'rounded',
            args: {
                radius: 8,
            },
        },
        anchor: 'center',
        connectionPoint: 'anchor',
        snap: true, // 自动吸附
        allowBlank: false, // 是否允许连接到画布空白位置的点
        allowLoop: false, // 是否允许创建循环连线，即边的起始节点和终止节点为同一节点
        allowNode: false, // 是否允许边链接到节点（非节点上的链接桩）
        createEdge() {
            return new Shape.Edge({
                attrs: {
                    line: {
                        stroke: '#808080',
                        strokeWidth: 1,
                        targetMarker: {
                            name: 'block',
                            args: {
                                size: '6',
                            },
                        },
                    },
                },
                zIndex: 0,
            })
        },
        validateConnection({ targetMagnet }) {
            return !!targetMagnet
        },
    },
    // 选中
    selecting: {
        enabled: true,
        // rubberband: true, // 启用框选必须禁用平移
    },
    // 复制
    clipboard: {
        enabled: true,
        useLocalStorage: true,
    },
    // 鼠标滚轮的默认行为
    mousewheel: {
        enabled: true,
        zoomAtMousePosition: true,
        modifiers: 'ctrl',
        minScale: 0.5, // 最小缩放
        maxScale: 2, // 最大缩放
    },
})

// 创建节点
export const createNode = (e:any) => ({
    id: 'node2', // String，节点的唯一标识
    x: 160, // Number，必选，节点位置的 x 值
    y: 180, // Number，必选，节点位置的 y 值
    width: 80, // Number，可选，节点大小的 width 值
    height: 30, // Number，可选，节点大小的 height 值
    label: e.name, // String，节点标签
    // 数据
    data: { 
        bizID: 125,
        date: '20200630',
        price: 89.00,
    },
    // 节点样式
    attrs: { 
        body: {
            fill: '#fff', // 背景颜色
            stroke: '#007fff', // 边框颜色
            strokeWidth: 1,        
            strokeDasharray: '10,2',
            rx: 15,
            ry: 15,
        },
        label: {
            fill: '#666', // 文字颜色
            fontSize: 12, // 文字大小
            fontWeight: '100',
            fontStyle: 'normal',
            textDecoration: 'normal',
            fontVariant: 'small-caps',
        },
    },  
    ports: { ...port },   
})
// 创建圆形节点
export const createRcondNode = (e:any) => ({
    id: 'node2', // String，节点的唯一标识
    x: 160, // Number，必选，节点位置的 x 值
    y: 160, // Number，必选，节点位置的 y 值
    width: 60, // Number，可选，节点大小的 width 值
    height: 60, // Number，可选，节点大小的 height 值
    label: e.name, // String，节点标签
    // 数据
    data: { 
        bizID: 125,
        date: '20200630',
        price: 89.00,
    },
    // 节点样式
    attrs: { 
        body: {
            fill: '#fff', // 背景颜色
            stroke: '#007fff', // 边框颜色
            strokeWidth: 1,
            rx: 50,
            ry: 50,
        },
        label: {
            fill: '#666', // 文字颜色
            fontSize: 12, // 文字大小
            fontWeight: '100',
            fontStyle: 'normal',
            textDecoration: 'normal',
            fontVariant: 'small-caps',
        },
    },  
    ports: { ...port },   
})
// 创建长方形节点
export const createSquareNode = (e:any) => ({
    id: 'node2', // String，节点的唯一标识
    x: 160, // Number，必选，节点位置的 x 值
    y: 180, // Number，必选，节点位置的 y 值
    width: 80, // Number，可选，节点大小的 width 值
    height: 30, // Number，可选，节点大小的 height 值
    label: e.name, // String，节点标签
    // 数据
    data: { 
        bizID: 125,
        date: '20200630',
        price: 89.00,
    },
    // 节点样式
    attrs: { 
        body: {
            fill: '#fff', // 背景颜色
            stroke: '#007fff', // 边框颜色
            strokeWidth: 1,     
        },
        label: {
            fill: '#666', // 文字颜色
            fontSize: 12, // 文字大小
            fontWeight: '100',
            fontStyle: 'normal',
            textDecoration: 'normal',
            fontVariant: 'small-caps',
        },
    },  
    ports: { ...port },   
})